<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" width="600px" title="个人中心">
    <div class="flx-align-center person-box">
      <img class="avatar-img" src="@/assets/images/avatar.png" alt="" />
      <el-descriptions :column="1">
        <el-descriptions-item label="登录账号 : "> {{ dialogProps.row.account }}</el-descriptions-item>
        <el-descriptions-item label="用户姓名 : "> {{ dialogProps.row.username }}</el-descriptions-item>
        <el-descriptions-item label="邮箱 : "> {{ dialogProps.row.email }}</el-descriptions-item>
        <el-descriptions-item label="手机号 : "> {{ dialogProps.row.mobile }}</el-descriptions-item>
        <el-descriptions-item label="账号状态 : "> {{ dialogProps.row.state === 1 ? '启用' : '禁用' }}</el-descriptions-item>
        <el-descriptions-item label="用户角色 : "> {{ getRoleName(dialogProps.row.roleInfoList) }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="PersonInfoDialog">
import { DialogProps } from '../types'

const dialogVisible = ref(false)
const dialogProps = ref<DialogProps>({
  row: {}
})

// 获取用户角色名称
const getRoleName = (arr) => arr?.map((item: any) => item.roleName).join('、')

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps) => {
  dialogProps.value = params
  dialogVisible.value = true
}

defineExpose({
  acceptParams
})
</script>
<style lang="less" scoped>
.person-box {
  padding: 20px;
  .avatar-img {
    width: 100px;
    margin-right: 20px;
  }
}
</style>
